<template>
    <div class="content">
        <el-table :data="tableData" style="width: 100%;" max-height="600"
                  row-key="id" border highlight-current-row id="rebateSetTable"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
                  >
            <template v-for="(itemHead) in tableHead">
                <el-table-column :key="itemHead.key" :label="itemHead.name">
                    <template v-for="(childItem) in itemHead.items">
                        <el-table-column :key="childItem.key" :label="childItem.name" :prop="childItem.props">
                            <template slot-scope="scope" >
                                <!-- 标题列 -->
                                <template v-if="childItem.props==='contact'">
                                    <div class="head-left">{{scope.row[scope.column.property][0]}}</div>
                                    <template v-if="scope.row[scope.column.property][1]">
                                        <div class="head-right">{{scope.row[scope.column.property][1]}}</div>
                                    </template>
                                </template>
                                <!-- 贡献度列 -->
                                <template v-else-if="childItem.props==='contribution_degree'">
                                    <div class="percentage-text">{{scope.row[scope.column.property]}}%</div>
                                    <el-progress :percentage="scope.row[scope.column.property]" :show-text="false"></el-progress>
                                </template>
                                <!-- 有效转化率列 -->
                                <template v-else-if="childItem.props==='effective_conversion'">
                                    <div class="head-right">{{scope.row[scope.column.property]}}
                                        <!-- 排除标题列 -->
                                        <template v-if="scope.row[scope.column.property]!=='--'">
                                            <span style="color: #cccccc">({{(scope.row[scope.column.property]/scope.row['total_hits']).toFixed(2)}}%)</span>
                                        </template>
                                    </div>
                                </template>
                                <!-- 普通列 -->
                                <template v-else>
                                    <div class="head-right">{{scope.row[scope.column.property]}}</div>
                                </template>
                            </template>
                        </el-table-column>
                    </template>
                </el-table-column>
            </template>

        </el-table>
    </div>
</template>


<script>


    export default {
        name: 'table-funnel',

        props: {
            /* 分析计算的返回数据*/
            attributeReportResData: {
                type: Object
            },
            /* 所有事件*/
            eventAll: {
                type: Array
            }
        },

        data() {
            return {
                tableHead: [],
                tableData: [],
            }
        },

        created() {
            let t = this;
            t.tableHead = [];
            t.tableData = [];

            t.initTabHead();
            t.initTabData();
            t.$watch('attributeReportResData', () => {
                t.tableHead = [];
                t.tableData = [];

                t.initTabHead();
                t.initTabData();
            });
        },

        methods: {
                       exportExcel () {
                /* generate workbook object from table */
                let wb = XLSX.utils.table_to_book(document.querySelector('#rebateSetTable'));
                /* get binary string as output */
                let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
                try {
                    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '计算结果.xlsx');
                } catch (e)
                {
                    if (typeof console !== 'undefined')
                        console.log(e, wbout)
                }
                return wbout
            },
            tm(item){
                console.log(item)
            },
            initTabHead() {
                let t = this;
                let tableHead =[]
                //一级表头
                tableHead.push({key: Symbol(), name: '待归因事件', items: []})
                tableHead.push({key: Symbol(), name: '点击规模', items: []})
                tableHead.push({key: Symbol(), name: '目标转化', items: []})

                //二级表头
                tableHead[0].items.push({key:Symbol(),name:'触点',props:'contact'})
                tableHead[1].items.push({key:Symbol(),name:'总点击数',props:'total_hits'})
                tableHead[1].items.push({key:Symbol(),name:'有效点击用户数',props:'effective_clicked'})
                tableHead[1].items.push({key:Symbol(),name:'有效转换点击率',props:'effective_conversion'})
                tableHead[2].items.push({key:Symbol(),name:'App启动的总次数',props:'app_starts'})
                tableHead[2].items.push({key:Symbol(),name:'贡献度',props:'contribution_degree'})

                this.tableHead = tableHead;
            },

            /* 初始化表身数据 */
            initTabData() {
                let tableData = []
                //对数据进行确认是否存在
                let rows = this.attributeReportResData?.rows

                if (rows){
                    for (let i = 0; i < rows.length; i++) {
                        //进行填充
                        for (let j = 0; j < rows[i]?.groups.length; j++) {
                            //表格的一个子项
                            let tableDataItem = {};
                            //如果是第一个则填写直接转换
                            if (i === -1) {
                                tableDataItem['contact'] = ['直接转换']
                                tableDataItem['total_hits'] = '--'
                                tableDataItem['effective_clicked'] = '--'
                                tableDataItem['effective_conversion'] = '--'
                                tableDataItem['app_starts'] = rows[i].groups[j]?.goalConversion
                                tableDataItem['contribution_degree'] = rows[i].groups[j]?.conversionValueRate
                            }else{
                                tableDataItem['contact_eventId'] = rows[i].eventId
                                //确定头部是什么
                                tableDataItem['contact'] = []
                                let eventAll = this.eventAll
                                for (let k = 0; k < eventAll.length; k++) {
                                    if (eventAll[k].eventId===tableDataItem['contact_eventId']){
                                        tableDataItem['contact'].push(eventAll[k].cname)
                                    }
                                }
                                //查看头部后面部分有无添加项
                                if (rows[i].groups[j].byValues[0]!=='$ALL'){
                                    let tail =""
                                    for (let k = 0; k < rows[i].groups[j].byValues.length; k++) {
                                        tail += rows[i].groups[j].byValues[k]+','
                                    }
                                    tableDataItem['contact'].push(tail.substring(0,tail.length-1))
                                }

                                tableDataItem['total_hits'] = rows[i].groups[j].value
                                tableDataItem['effective_clicked'] = rows[i].groups[j].convertedUserNumber
                                tableDataItem['effective_conversion'] = rows[i].groups[j].convertedNumber
                                tableDataItem['app_starts'] = rows[i].groups[j].goalConversion
                                tableDataItem['contribution_degree'] = rows[i].groups[j]?.conversionValueRate
                            }
                            //填充
                            tableData.push(tableDataItem)
                        }
                    }
                }

                this.tableData = tableData
            }
        },
        watch: {}
    }
</script>

<style>
    .popoverClass {
        padding: 0px !important;
        background: #000000;
    }
    .popper__arrow::after{
        border-top-color: #000000 !important;
    }
</style>
<style scoped lang="scss">

    .percentage-text{
        text-align: end;
    }
    .head-left{
        display: inline-block;
    }
    .head-right{
        display: inline-block;
        float: right;
    }
    /deep/.el-table tbody tr:hover>td {
        background-color:#ffffff !important
    }

    /deep/.el-table__body tr.current-row>td{
        background-color: #ffffff !important;
    }

    .item-value{
        text-align: center;
        height: 80px;
        .item-value-detail{
            height: 14px;
            line-height: 14px;
            font-size: 6px;
            margin-bottom: 2px;
        }
        .item-value-head{
            margin-bottom: 3px;
        }
    }
    .item-value-center{
        line-height: 80px;
    }
    ::v-deep .el-table tbody td {
        padding: 5px 0;
    }

    .fix-height{
        height: 10px;
    }


</style>
